import React from 'react';
import { subscribe } from 'horizon-react';
import AddTodoButton from './AddTodoButton';
import TodoItem from './TodoItem';

import styles from './styles';

const mapDataToProps = {
  todos: (hz, props) => hz('todos').limit(props.limit)
};

const TodoList = (props) => (
    <div className={styles.input}>
     <ul className={styles.list} >
       {props.todos.map(
         todo => (
            <TodoItem
              key={todo.id}
              todo={todo}
              horizon={props.horizon}
            />
         )
        )}
  </ul>
    <AddTodoButton />
    </div>
);

export default subscribe({
  mapDataToProps
})(TodoList);
